<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面 - 跨境进口电商</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .step-indicator {
            position: relative;
        }
        .step-indicator::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #e5e7eb;
            z-index: -1;
        }
        .step-indicator:last-child::after {
            display: none;
        }
        .step-indicator.completed::after {
            background: #10b981;
        }
        .payment-method {
            transition: all 0.3s ease;
        }
        .payment-method:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .payment-method.selected {
            border-color: #8b5cf6;
            background-color: #f3e8ff;
        }
        
        /* 微交互动画 */
        .btn-bounce {
            transition: all 0.2s ease;
        }
        .btn-bounce:hover {
            transform: scale(1.05);
        }
        .btn-bounce:active {
            transform: scale(0.95);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .pulse-glow {
            animation: pulseGlow 2s infinite;
        }
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(147, 51, 234, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(147, 51, 234, 0.8);
            }
        }
        .loading-spinner {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .bg-white {
            background-color: #2d2d2d;
        }
        .dark-mode .text-gray-900 {
            color: #ffffff;
        }
        .dark-mode .text-gray-600 {
            color: #d1d5db;
        }
        .dark-mode .border-gray-200 {
            border-color: #4b5563;
        }
        .dark-mode .bg-gray-50 {
            background-color: #374151;
        }
        .dark-mode .hover:bg-gray-50:hover {
            background-color: #4b5563;
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购直播</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                        <div class="flex items-baseline space-x-4">
                            <a href="../index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                            <a href="../overseas-live-center.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                            <a href="../overseas-shopping.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                            <a href="../shopping-cart/index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 步骤指示器 -->
        <div class="mb-8">
            <div class="flex items-center justify-center">
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">购物车</span>
                </div>
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">确认订单</span>
                </div>
                <div class="step-indicator flex flex-col items-center">
                    <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold animate-pulse">
                        3
                    </div>
                    <span class="text-sm font-medium text-purple-600 mt-2">支付</span>
                </div>
                <div class="step-indicator flex flex-col items-center">
                    <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center text-white font-bold">
                        4
                    </div>
                    <span class="text-sm font-medium text-gray-600 mt-2">完成</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：支付方式选择 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-6">选择支付方式</h2>
                    
                    <!-- 支付方式选项 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div class="payment-method border-2 border-gray-200 rounded-lg p-4 cursor-pointer" onclick="selectPayment('alipay')">
                            <div class="flex items-center space-x-3">
                                <input type="radio" name="payment" value="alipay" class="text-purple-600">
                                <i class="fab fa-alipay text-blue-500 text-2xl"></i>
                                <div>
                                    <h3 class="font-semibold text-gray-900">支付宝</h3>
                                    <p class="text-sm text-gray-600">推荐支付宝用户使用</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-method border-2 border-gray-200 rounded-lg p-4 cursor-pointer" onclick="selectPayment('wechat')">
                            <div class="flex items-center space-x-3">
                                <input type="radio" name="payment" value="wechat" class="text-purple-600">
                                <i class="fab fa-weixin text-green-500 text-2xl"></i>
                                <div>
                                    <h3 class="font-semibold text-gray-900">微信支付</h3>
                                    <p class="text-sm text-gray-600">推荐微信用户使用</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-method border-2 border-gray-200 rounded-lg p-4 cursor-pointer" onclick="selectPayment('card')">
                            <div class="flex items-center space-x-3">
                                <input type="radio" name="payment" value="card" class="text-purple-600">
                                <i class="fas fa-credit-card text-purple-500 text-2xl"></i>
                                <div>
                                    <h3 class="font-semibold text-gray-900">银行卡支付</h3>
                                    <p class="text-sm text-gray-600">支持各大银行借记卡、信用卡</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-method border-2 border-gray-200 rounded-lg p-4 cursor-pointer" onclick="selectPayment('unionpay')">
                            <div class="flex items-center space-x-3">
                                <input type="radio" name="payment" value="unionpay" class="text-purple-600">
                                <i class="fas fa-university text-red-500 text-2xl"></i>
                                <div>
                                    <h3 class="font-semibold text-gray-900">银联支付</h3>
                                    <p class="text-sm text-gray-600">支持银联卡在线支付</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 支付表单区域 -->
                    <div id="payment-form" class="hidden">
                        <!-- 支付表单将通过JavaScript动态加载 -->
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="flex items-start space-x-3">
                            <i class="fas fa-shield-alt text-green-500 mt-1"></i>
                            <div>
                                <h4 class="text-sm font-medium text-green-900">支付安全保障</h4>
                                <p class="text-sm text-green-700 mt-1">
                                    您的支付信息将通过SSL加密传输，我们采用国际标准的支付安全协议，确保您的支付安全。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：订单摘要 -->
            <div class="space-y-6">
                <!-- 订单摘要 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">订单摘要</h3>
                    
                    <!-- 商品列表 -->
                    <div class="space-y-3 mb-4">
                        <div class="flex items-center space-x-3">
                            <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">SK-II 神仙水精华液</p>
                                <p class="text-xs text-gray-600">230ml</p>
                            </div>
                            <span class="text-sm font-medium">¥1,299</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">资生堂红腰子精华</p>
                                <p class="text-xs text-gray-600">50ml</p>
                            </div>
                            <span class="text-sm font-medium">¥899</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">CPB钻石精华</p>
                                <p class="text-xs text-gray-600">30ml</p>
                            </div>
                            <span class="text-sm font-medium">¥2,599</span>
                        </div>
                    </div>
                    
                    <!-- 费用明细 -->
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">商品总价</span>
                            <span class="font-medium">¥4,797</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">直播优惠</span>
                            <span class="font-medium text-green-600">-¥900</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">优惠券</span>
                            <span class="font-medium text-green-600">-¥100</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">跨境电商综合税</span>
                            <span class="font-medium">¥611</span>
                        </div>
                        <div class="border-t border-gray-200 pt-2">
                            <div class="flex justify-between">
                                <span class="font-semibold text-gray-900">应付总额</span>
                                <span class="font-bold text-lg text-red-600">¥4,408</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 跨境购买提示 -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                        <div>
                            <h4 class="text-sm font-medium text-blue-900">跨境购买须知</h4>
                            <p class="text-sm text-blue-700 mt-1">
                                根据海关规定，跨境商品需要提供真实身份信息。单笔订单限额5000元，年度个人限额26000元。
                            </p>
                            <div class="mt-3 text-xs text-blue-600">
                                <div class="flex justify-between">
                                    <span>本年已使用额度：</span>
                                    <span>¥8,234</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>剩余可用额度：</span>
                                    <span>¥17,766</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 服务保障 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">服务保障</h3>
                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span class="text-sm text-gray-700">SSL加密支付</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shipping-fast text-blue-500"></i>
                            <span class="text-sm text-gray-700">包邮包税</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-undo text-purple-500"></i>
                            <span class="text-sm text-gray-700">7天无理由退货</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-headset text-orange-500"></i>
                            <span class="text-sm text-gray-700">24小时客服</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 支付处理弹窗 -->
    <div id="payment-processing" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-8 text-center">
            <div class="loading-spinner w-16 h-16 border-4 border-purple-200 border-t-purple-600 rounded-full mx-auto mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">正在处理支付</h3>
            <p class="text-gray-600">请稍候，正在验证支付信息...</p>
            <div class="mt-4 bg-gray-100 rounded-lg p-3">
                <p class="text-sm text-gray-600">订单号：CB20241201123456</p>
                <p class="text-sm font-medium text-gray-900">支付金额：¥4,408</p>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });
        
        // 选择支付方式
        function selectPayment(method) {
            // 移除所有选中状态
            document.querySelectorAll('.payment-method').forEach(el => {
                el.classList.remove('selected');
            });
            
            // 添加选中状态
            event.currentTarget.classList.add('selected');
            
            // 选中对应的radio
            document.querySelector(`input[value="${method}"]`).checked = true;
            
            // 显示对应的支付表单
            showPaymentForm(method);
        }
        
        // 显示支付表单
        function showPaymentForm(method) {
            const formContainer = document.getElementById('payment-form');
            formContainer.classList.remove('hidden');
            
            let formContent = '';
            
            switch(method) {
                case 'alipay':
                    formContent = `
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <i class="fab fa-alipay text-blue-500 text-xl"></i>
                                <div>
                                    <h3 class="font-semibold text-blue-900">支付宝支付</h3>
                                    <p class="text-sm text-blue-700">使用支付宝扫码支付</p>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg p-4 text-center">
                                <div class="w-32 h-32 bg-gray-100 rounded-lg mx-auto mb-3 flex items-center justify-center">
                                    <i class="fas fa-qrcode text-gray-400 text-4xl"></i>
                                </div>
                                <p class="text-sm text-gray-600">请使用支付宝扫描二维码完成支付</p>
                            </div>
                            <div class="mt-3 text-xs text-blue-600">
                                <p><i class="fas fa-shield-alt mr-1"></i>支付宝安全支付保障</p>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'wechat':
                    formContent = `
                        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <i class="fab fa-weixin text-green-500 text-xl"></i>
                                <div>
                                    <h3 class="font-semibold text-green-900">微信支付</h3>
                                    <p class="text-sm text-green-700">使用微信扫码支付</p>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg p-4 text-center">
                                <div class="w-32 h-32 bg-gray-100 rounded-lg mx-auto mb-3 flex items-center justify-center">
                                    <i class="fas fa-qrcode text-gray-400 text-4xl"></i>
                                </div>
                                <p class="text-sm text-gray-600">请使用微信扫描二维码完成支付</p>
                            </div>
                            <div class="mt-3 text-xs text-green-600">
                                <p><i class="fas fa-shield-alt mr-1"></i>微信安全支付保障</p>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'card':
                    formContent = `
                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <i class="fas fa-credit-card text-purple-500 text-xl"></i>
                                <div>
                                    <h3 class="font-semibold text-purple-900">银行卡支付</h3>
                                    <p class="text-sm text-purple-700">支持各大银行借记卡、信用卡</p>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-purple-700 mb-1">银行卡号</label>
                                    <input type="text" placeholder="请输入银行卡号" class="w-full border border-purple-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-purple-700 mb-1">有效期</label>
                                        <input type="text" placeholder="MM/YY" class="w-full border border-purple-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-purple-700 mb-1">CVV</label>
                                        <input type="text" placeholder="后三位" class="w-full border border-purple-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-purple-700 mb-1">持卡人姓名</label>
                                    <input type="text" placeholder="请输入持卡人姓名" class="w-full border border-purple-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-purple-600">
                                <p><i class="fas fa-shield-alt mr-1"></i>银行卡信息加密传输，安全有保障</p>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'unionpay':
                    formContent = `
                        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <i class="fas fa-university text-red-500 text-xl"></i>
                                <div>
                                    <h3 class="font-semibold text-red-900">银联支付</h3>
                                    <p class="text-sm text-red-700">支持银联卡在线支付</p>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-red-700 mb-1">银联卡号</label>
                                    <input type="text" placeholder="请输入银联卡号" class="w-full border border-red-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-red-700 mb-1">银行预留手机号</label>
                                    <input type="text" placeholder="请输入银行预留手机号" class="w-full border border-red-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-red-700 mb-1">验证码</label>
                                    <div class="flex space-x-2">
                                        <input type="text" placeholder="请输入验证码" class="flex-1 border border-red-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
                                        <button class="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 transition-colors">
                                            获取验证码
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-red-600">
                                <p><i class="fas fa-shield-alt mr-1"></i>银联安全支付保障</p>
                            </div>
                        </div>
                    `;
                    break;
            }
            
            formContainer.innerHTML = formContent + `
                <div class="flex space-x-4">
                    <button onclick="cancelPayment()" class="flex-1 border border-gray-300 text-gray-700 py-3 rounded-lg hover:bg-gray-50 transition-colors btn-bounce">
                        取消支付
                    </button>
                    <button onclick="processPayment()" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium btn-bounce pulse-glow">
                        确认支付 ¥4,408
                    </button>
                </div>
            `;
        }
        
        // 处理支付
        function processPayment() {
            const paymentMethod = document.querySelector('input[name="payment"]:checked');
            
            if (!paymentMethod) {
                alert('请选择支付方式');
                return;
            }
            
            // 显示支付处理中弹窗
            document.getElementById('payment-processing').classList.remove('hidden');
            
            // 模拟支付处理
            setTimeout(() => {
                // 隐藏处理中弹窗
                document.getElementById('payment-processing').classList.add('hidden');
                
                // 跳转到成功页面
                window.location.href = '../success/index.html';
            }, 3000);
        }
        
        // 取消支付
        function cancelPayment() {
            if (confirm('确定要取消支付吗？')) {
                window.location.href = '../shopping-cart/index.html';
            }
        }
        
        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
            const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
            
            notification.className = `fixed top-20 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas ${icon}"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>